<!DOCTYPE html>
<html lang="en">
  <head>
    <style>
      .btn4 {
        color: #000;
        text-decoration: none;
        font-size: 15px;
        border: 1px solid #fff;
      }
      .btn4:hover {
        color: red;
        opacity: 0.5;
      }
    </style>
    <link rel="stylesheet" href="./1.css/详情.css" />
    <link rel="stylesheet" href="1.css/详情划过.css" />

    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>详情</title></head
  ><style></style>
  <body>
    <div class="box">
      <!-- 头部 -->
      <header>
        <ul id="a1">
          <li class="logo"></li>
          <li></li>
          <li></li>
          <li><img src="./1.img/1.png" class="i1" /></li>
          <li></li>
          <li style="font-weight: bolder">z30pro</li>
          <li>红魔</li>
          <li style="font-weight: bolder">play</li>
          <li>智能生态</li>
          <li>品牌</li>
          <li>服务</li>
          <li>社区</li>
          <li>体验区</li>
          <li></li>
          <li></li>
          <li class="gou">🛒</li>
        </ul>

        <!-- 下拉菜单 -->
        <div class="xiala">
          <br />
          <img class="ssss" src="./1.img/2.jpg" />
          <img src="./1.img/3.jpg" />
          <img src="./1.img/4.jpg" />
          <img src="./1.img/5   .jpg" />
        </div>
      </header>
      <!-- 头1 -->
      <div class="tou">
        <a href="#">首页/</a>
        <a href="#">红魔/</a>
        <a style="color: #000" href="#">腾讯红魔手机</a>
        <hr />
      </div>
      <!-- 图 -->
      <div class="zhong">
        <div>
          <img
            style="display: block"
            class="img1"
            src="./1.img/详情页1.png"
            alt=""
          />
          <img class="img1" src="./1.img/详情页2.png" alt="" />
          <img class="img1" src="./1.img/详情页3.png" alt="" />
          <img class="img1" src="./1.img/详情页4.png" alt="" />
        </div>
        <h3>腾讯红魔游戏手机6P幻黑8GB+256GB</h3>

        <h6 style="color: red">
          骁龙888旗舰芯片/144Hz屏幕刷新率/55W快充<br />
          享12期免息/购买套装立减50
        </h6>
        <p></p>
        <hr />
        <h6 class="huo">活　动</h6>
        <img class="img3" src="./1.img/详情分期.png" alt="" />
        <h6 class="xiang">
          享受花呗3期,6期,12期免息分期
          <br /><br />购买即赠积分，积分可抵现<br /><br />青铜及以下满59、白银满39、黄金及以上包邮
        </h6>
        <hr />
        <img class="dizhi" src="./1.img/详情地址.png" alt="" />
        <hr />
        <h6 class="xuan">选择颜色</h6>
        <button class="btn1">流光银</button>
        <button class="btn1">幻影黑</button>
        <h6 class="xuan">选择版本</h6>
        <button class="btn1">8G+128G</button>
        <button class="btn1">12G+128G</button>
        <h6 class="xuan">选择套餐</h6>
        <button
          style="
            width: 400px;
            height: 55px;
            background-color: #fff;
            border: 1px solid #cacaca;
            margin: 5px;
          "
        >
          "红魔6R（8+128）幻影黑/红魔TWS真无线游戏蓝牙耳机套装 ¥3548.00
          ，省¥50.00"
        </button>
        <button class="btn">仅手机 ¥3299.00</button>
        <br />
        <h6 class="bao">保障服务？</h6>
        <button class="btn2">红魔6R（8G+128G）延长宝（1年） ¥119.00</button>
        <button style="float: left" class="btn2">
          红魔6R（8G+128G）屏碎宝（半年内保修1次） ¥109.00
        </button>
        <button style="float: left; margin-left: 670px" class="btn2">
          红魔6R（8G+128G）屏碎宝（1年内保修1次） ¥159.00
        </button>
        <h6 class="hua">花呗分期</h6>
        <button class="btn3">￥1179.18*3 <br />含￥79.53手续费</button>
        <button class="btn3">￥602.27*6 <br />含￥155.61手续费</button>
        <button style="position: absolute; right: 550px" class="btn3">
          ￥309.78*12 <br />含￥259.35手续费
        </button>
        <div class="shuliang">
          <h6 style="margin-top: 20px">数 　量&nbsp;</h6>
          <div class="tex">1</div>
        </div>

        <br /><br /><br /><br /><br />
        <div class="liji">
          <button class="btn4">加入购物车</button>
          <button class="btn44">立即购买</button>
          <div class="jia">+</div>
          <div class="jian">-</div>
        </div>
        <div class="img4">
          <img class="img2" src="./1.img/详情页1.png" alt="" /><img
            class="img2"
            src="./1.img/详情页2.png"
            alt=""
          /><img class="img2" src="./1.img/详情页3.png" alt="" /><img
            class="img2"
            src="./1.img/详情页4.png"
            alt=""
          />
        </div>
        <h6 style="float: left; margin-top: -270px">
          分享　　&nbsp;&nbsp; 收藏
        </h6>
        <hr />
      </div>
    </div>

    <div
      class="zongjia"
      style="
        width: 100px;
        height: 40px;
        background-color: #000;
        color: #fff;
        margin-left: 1120px;
        margin-top: -125px;
        text-align: center;
        line-height: 40px;
        border-radius: 30px;
      "
    ></div>
    <script src="./js/axios.min - 副本.js"></script>
    <script src="./js/jquery-3.6.0.min.js"></script>
    <script src="./js/详情页.JS"></script>
  </body>
</html>
